<template>
  <div id="main" :style="{ backgroundImage: `url(${backgroundimg})` }">
    <!-- 顶部导航栏 -->
    <div class="title">
      <span>Message</span>
    </div>
    <div class="back" @click="leftClick()">
      <el-button icon="el-icon-back" >Back to home</el-button>
    </div>

    <div id="message-main-out">
     
    </div>

    <div class='app-container'>
      <div class='header'>
        <div class='header-img'>
          <img
            src='@/assets/lb2.jpg'
            alt=""
            style="width:100%;height:100%"
          >
          <div class='message-text'>
            <div>
              <p>留言板</p>
            </div>
            <div class='under-line'>
              <div></div>
            </div>
          </div>
        </div>
      </div>

      <div id="message-main">
        <!-- 留言板，输入留言内容  -->
        <div id="field">
          <van-field
            v-model="message.content"
            rows="2"
            autosize
            type="textarea"
            maxlength="100"
            placeholder="留个言吧。。。"
            show-word-limit
          />
        </div>
        <!-- 点击按钮，发表评论  -->
        <div class="button">
            <el-button type="primary" plain size="mini" color="linear-gradient(to right, #ff9569 0%, #e92758 100%)" @click="remark">
              发送
            </el-button>
        </div>
     
        <div
          id="message-content"
          v-for="(item, index) in messagelist"
          :key="index"
        >
          <MessageItem :name="item.name" :content="item.content" />
        </div>
      </div>
      
    </div>




    

  </div>
</template>

<script>
import TopNavBar from "@/components/TopNavBar.vue";
import MessageItem from "./components/MessageItem.vue";
export default {
  name: "Message_board",
  components: {
    TopNavBar,
    MessageItem,
  },
  data() {
    return {
      message: { name: "", content: "" },
      messagelist: [],
      backgroundimg: require("@/assets/xc4.jpg"),
    };
  },
  methods: {
    // 点击导航栏左按键，返回主页
    leftClick() {
      console.log("返回主页");
      this.$router.push({ path: "/home" });
    },
    // 发表评论，并将评论储存至本地
    remark() {
      if (this.message.content != "") {
        this.message.name = this.messagelist.length + 1 + "楼";
        this.messagelist.push(this.message);
        localStorage.setItem("message", JSON.stringify(this.messagelist));
        this.message = {};
      }
    },
  },
  // 若无本地数据 读取本地文件中数据，若有，则将本地数据传给页面
  async created() {
    this.axios.get("/data/message.json").then((res) => {
      if (localStorage.getItem("message") == null) {
        localStorage.setItem("message", JSON.stringify(res.data));
      }
      this.messagelist = JSON.parse(localStorage.getItem("message"));
    });
  },
};
</script>

<style lang="less" scoped>
#main {
  position: relative;
  min-height: 100vh;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
#message-main {
  border-radius: 4px;
  padding: 10px;
  background-color: rgba(255, 255, 255, 0.6);
  font-size: 20px;
  font-family: STHeiti;
}
#field {
  border: 0.5px solid rgb(69, 69, 69);
}
.button{
  margin-left: 80%;
}
.title{
  text-align: center;
  padding: 10px;
  font-size: 16px;
  color: aliceblue;
  font-family: STLiti;
}
.back{
  position: fixed;
  margin-top: -30px;
  z-index: 1;
}
.el-button {
  background:transparent;
  color: rgb(253, 253, 253);
  width: 60px;
  height: 5px;
  font-size: 5px;
  padding: 7px 10px;
}


.app-container{
  display: flex;
  flex-direction: column;
  width: 100%;
}
.header{
  width: 100%;
}
.header-img {
  width: 100%;
  height: 60%;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}
.message-text {
  position: absolute;
  color: #ffffff;
  top: 50%;
  left: 50%;
  text-align: center;
  font-size: 24px;
  transform: translate(-50%, -50%);
}
.under-line {
  width: 100%;
  display: flex;
  justify-content: center;
}
.under-line >div{
  width: 70px;
  height: 3px;
  background: #7248e5;
  margin-top: 5px;
  border-radius: 20px;
}
           


</style>